<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #allmap{
            height: 100%;
        }
    </style>
</head>
<body>
<div id="allmap"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=9Djbe3ODcFlzyghHHm35ZqCZkp8GdleO"></script>
<script>
    var title = '020商业摄影基地',
        address = '广州市番禺区南浦大道南200米新合益围A1栋6-7楼',
        city = address.substr(0,3);

    // 百度地图API功能
    var map = new BMap.Map("allmap");                       // 创建Map实例
    var point = new BMap.Point(116.404, 39.915);            // 初始化地图,设置中心点坐标
    map.centerAndZoom(point, 17);                           // 设置地图级别
    map.enableScrollWheelZoom(true);                        //开启鼠标滚轮缩放

    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function(e){
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        console.log("当前定位地址为：" + address);
    });
    geolocationControl.addEventListener("locationError",function(e){
        // 定位失败事件
        alert(e.message);
    });
    map.addControl(geolocationControl);


    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    map.addControl(top_left_control);

    // 创建地址解析器实例
    var myGeo = new BMap.Geocoder();
    // 将地址解析结果显示在地图上,并调整地图视野
    myGeo.getPoint(address, function (point) {
        if (point) {
            map.centerAndZoom(point, 17);
            map.addOverlay(new BMap.Marker(point));

            var opts = {
                width : 200,     // 信息窗口宽度
                height: 40,     // 信息窗口高度
                title : '' , // 信息窗口标题
                enableMessage:false,//设置允许信息窗发送短息
                message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
            };
            var infoWindow = new BMap.InfoWindow(address, opts);  // 创建信息窗口对象

            //开启信息窗口
            map.openInfoWindow(infoWindow,point);
        } else {
            alert("您选择地址没有解析到结果!");
        }
    }, city);
</script>
</body>
</html>